<%@ page language="java" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
<!-- Standard Meta -->
<c:import url="../common/meda.jsp"></c:import>

<!-- Site Properties -->
<title>使用教程-${sysDesc}</title>
<link rel="stylesheet" type="text/css"
	href="//${static_server }/css/semantic.min.css">
<link rel="stylesheet" type="text/css"
	href="//${static_server }/css/slick.css">
<link rel="stylesheet" type="text/css"
	href="//${static_server }/css/slick-theme.css">
<link href="//${static_server }/css/simple-line-icons.css"
	rel="stylesheet">
<link rel="stylesheet" type="text/css"
	href="http://${static_server }/css/common.css">
<link rel="stylesheet" type="text/css"
	href="http://${static_server }/css/index.css">
<style type="text/css">
.headline p {
	margin-bottom: 40px;
	font-weight: 100;
	font-size: 16px;
	color: #2b2b2b;
}

p {
	margin-bottom: 20px;
	line-height: 24px;
}

p {
	margin: 0 0 10px;
}

.headline {
	text-align: center;
	position: relative;
	border-bottom: 1px solid rgba(0, 0, 0, 0.03);
	margin-bottom: 50px;
}

.headline h2 {
	font-size: 36px;
}

h2 {
	font-weight: 700;
	margin-bottom: 20px;
}

h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	margin-bottom: 10px;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 300;
	font-family: "Raleway", Lucida Sans Unicode, "Helvetica Neue", Helvetica,
		Arial, sans-serif;
	color: #1a1a1a;
	transition: all .50s ease-in-out;
	-moz-transition: all .50s ease-in-out;
	-webkit-transition: all .50s ease-in-out;
}

.panel {
	margin-bottom: 20px;
	background-color: #fff;
	border: 1px solid transparent;
	border-radius: 4px;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
	box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.price-plan .panel-heading {
	background: #333;
	text-align: center;
	padding: 25px 0;
	border-radius: 0;
}

.panel-heading {
	padding: 10px 15px;
	border-bottom: 1px solid transparent;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

.price-plan h4 {
	color: #FFF;
	font-size: 17px;
	text-align: center;
	margin-bottom: 0;
}

.price-plan .panel-body {
	background: #444;
	padding: 30px 0;
	margin-bottom: 0;
}

.price-plan h3 {
	color: #fff;
	text-align: center;
	font-size: 38px;
	font-weight: bold;
	margin-bottom: 0;
}

.price-plan h3 span {
	font-weight: 300;
	font-size: 18px;
}

.panel>.list-group {
	margin-bottom: 0;
}

.list-group {
	padding-left: 0;
	margin-bottom: 20px;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

ul, ol {
	margin-top: 0;
	margin-bottom: 10px;
}

.panel>.list-group .list-group-item {
	border-width: 1px 0;
	border-radius: 0;
}

.price-plan .list-group-item {
	padding: 15px 20px;
	border: 1px dotted #E5E5E5;
	text-align: center;
}

.list-group-item {
	position: relative;
	display: block;
	padding: 10px 15px;
	margin-bottom: -1px;
	background-color: #fff;
	border: 1px solid #ddd;
}

.price-plan h3 sup {
	font-size: 18px;
}

sup {
	top: -.5em;
}

sub, sup {
	position: relative;
	font-size: 75%;
	line-height: 0;
	vertical-align: baseline;
}

.price-plan {
	background: #FFF;
	border: 1px solid rgba(0, 0, 0, 0.05);
	border-radius: 0;
	box-shadow: none;
}

.price-plan .panel-footer {
	background: #333;
	padding: 25px 0;
	border-radius: 0;
}

.list-group+.panel-footer {
	border-top-width: 0;
}

.text-center {
	text-align: center;
}

.panel-footer {
	padding: 10px 15px;
	background-color: #f5f5f5;
	border-top: 1px solid #ddd;
	border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px;
}

.popular .panel-heading {
	background: #08b4da;
}

.popular .panel-body {
	background: #0AA9CC;
}

.popular .panel-footer {
	background: #08b4da;
}
.features {
    margin-bottom: 40px;
    text-align: left;
}
.features i {
    float: left;
    margin-right: 20px;
}
.line-font {
    font-size: 48px;
}
.blue {
    color: #08b4da;
}
.features h3 {
    font-size: 18px;
    font-weight: bold;
    padding-top: 15px;
}
p {
    margin-bottom: 20px;
    line-height: 24px;
}
.features p {
    clear: both;
    padding-top: 10px;
}

.white-text {
    color: #FFF;
}

.bg-blue-pattern {
    background-color: #08b4da !important;
    background: url(//${static_server}/img/blue-square.png) !important;
}

.white-text h2 {
    color: #FFF;
}

.white-text p {
    color: #FFF;
}

ul.steps-list li {
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(0,0,0,0.03);
}

ul.steps-list li span {
    float: left;
    border-radius: 50%;
    width: 55px;
    height: 55px;
    line-height: 55px;
    display: block;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    background: #08b4da;
    color:#fff;
}

ul.steps-list li h4, ul.steps-list li p {
    margin-left: 80px;
}

h4 {
    font-size: 17px;
    font-weight: 700;
    color: #2d2d2d;
}

ul.steps-list li h4, ul.steps-list li p {
    margin-left: 80px;
}

</style>
<script src="http://${static_server }/js/jquery.min.js"></script>
<script src="http://${static_server }/js/semantic.min.js"></script>
<script src="//${static_server }/js/slick.min.js"></script>
<script src="http://${static_server }/js/common.js"></script>
<script src="//${static_server }/js/title_menu.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	
}); 
 
</script>

</head>
<body class="pushable">
	<c:import url="../common/title_menu.jsp"></c:import>
	<div class="pusher">
		<div id="schoolheadsegment"
			class="ui vertical raised masthead segment">
			<div class="ui container">
				<div class="ui breadcrumb">
					<a class="section" href="http://${static_server }/"><i
						class="icon home"></i>首页</a>
					<div class="divider">/</div>
					<div class="active section">使用教程</div>
				</div>
			</div>
			<!-- content container end -->
		</div>
		<div class="ui vertical masthead segment" style="padding: 90px 0;    border-bottom: 1px solid rgba(34,36,38,.15);">
			<div class="ui container">
				<div class="headline">
					<h2>使用教程</h2>
					<p>平台是如何有效服务的，使用注意事项，以及视频教程。</p>
				</div>
				<div class="ui  stackable very relaxed centered grid">
					<div class="six wide column">
					<!-- How It Works List -->
					<ul class="steps-list">
						<li>
							<span>1</span><!-- Step Number -->
							<h4>注册用户，完善个人信息</h4><!-- Step Title -->
							<p>首先完成用户注册，注册成功后登陆系统，进入个人中心，完善个人信息，为了更好服务于您，请您填写真实有效的信息。</p><!-- Step Description -->
						</li>
						<li>
							<span>2</span>
							<h4>职业兴趣测评</h4>
							<p>为了更好的挖掘考生的个人潜能，帮助考生做职业规划，我们会再后面的方案中使用测评结果，为考生推介更加适合自己兴趣爱好的专业。</p>
						</li>
						<li>
							<span>3</span>
							<h4>选择更多条件</h4>
							<p>选择更多的条件以帮助考生更加精准的规划志愿方案。</p>
						</li>
						<li>
							<span>4</span>
							<h4>生成志愿填报方案</h4>
							<p>生成完备的志愿填报方案，打印方案，对方案再做进一步的人为规划。</p>
						</li>
					</ul>					
					<!-- End How It Works List -->
				</div>
					<div class="ten wide column">
					<div class="video-container">
						<video src="//${static_server }/video/Life.mp4" controls="controls" height="100%" width="100%">您的浏览器不支持此种视频格式。</video>  <!-- Responsive video iframe -->
					</div>
				</div>
				</div>
			</div>
		</div>
		<!-- segment end -->
		<c:import url="../common/footer.jsp"></c:import>
	</div>
	<!-- pusher end -->
</body>
</html>